<template>
  <div class="shop">
      <!-- 商家列表页面渲染 -->
        <div class="shop_top">
            <p>首页</p><span>/</span>
            <p>数据管理</p><span>/</span>
            <p class="shop_top_one">商家列表</p>
      </div>
      <div>
            <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column type="expand">
      <template slot-scope="props">
        <el-form label-position="left" inline class="demo-table-expand">
          <el-form-item label="商品名称">
            <span>{{ props.row.name }}</span>
          </el-form-item>
          <el-form-item label="所属店铺">
            <span>{{ props.row.shop }}</span>
          </el-form-item>
          <el-form-item label="商品 ID">
            <span>{{ props.row.id }}</span>
          </el-form-item>
          <el-form-item label="店铺 ID">
            <span>{{ props.row.shopId }}</span>
          </el-form-item>
          <el-form-item label="商品分类">
            <span>{{ props.row.category }}</span>
          </el-form-item>
          <el-form-item label="店铺地址">
            <span>{{ props.row.address }}</span>
          </el-form-item>
          <el-form-item label="商品描述">
            <span>{{ props.row.description }}</span>
          </el-form-item>
        </el-form>
      </template>
    </el-table-column>
    <el-table-column
      label="店铺名称"
      prop="id">
    </el-table-column>
    <el-table-column
      label="店铺地址"
      prop="name">
    </el-table-column>
    <el-table-column
      label="店铺介绍"
      prop="description">
    </el-table-column>
    <el-table-column
      label="操作"
      prop="edit">
      <el-button >编辑</el-button>
      <el-button >添加食品</el-button>
       <el-button type="danger">删除</el-button>
    </el-table-column>
  </el-table>
      </div>
  <div class="block">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage1"
      :page-size="20"
      layout="total, prev, pager, next"
      :total=tiao>
    </el-pagination>
  </div>
  </div>
</template>

<script>

export default {
    data() {
      return {
        tableData: [],
         currentPage1: 1 ,//当前默认页数
         num:0,
         tiao:''
      }
    },
    async created(){
        var res=await this.$axios.get('https://elm.cangdu.org/shopping/restaurants/count');
        this.tiao=res.data.count;
       this.handleCurrentChange();
    },
    methods:{
        handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
     async handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        var a=(val*20)-20;
        var res=await this.$axios.get(`https://elm.cangdu.org/shopping/restaurants?latitude=39.90469&longitude=116.407173&offset=${a}&limit=20`)
        console.log(res);
        this.tableData=res.data;
      }
    }
  }

</script>

<style>
.block{
    margin: 10px 0 20px;
}
.el-button{
    font-size: 12px;
    padding: 3px 0;
}
.demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
.shop{
    width:100%;
    height:100%;
}
page{
    height: 100%;
}
.shop_top{
    height: 60px;
    background: #eee;
    display: flex;
    align-items: center;
    padding-left: 20px;
}
.shop_top_one{
    color: #97a8be;
}
span{
    margin: 0 8px;
}
</style>